<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>UserInterface</title>
  <style>
    *{
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .user-interface{
      margin: 0 auto;
      margin-top: 50px;
      position: relative;
      width: 400px;
      min-height: 200px;
      border: 1px solid red;
    }
    .user-interface>div{
      width: 100%;
      height: 50px;
      border: 1px solid gray;
      font-size: 12px;
    }
    .appearance{
      appearance: unset;
    }
    .text-overflow{
      white-space: nowrap;
      overflow: hidden;
      display: inline-block;
      text-overflow: ellipsis;
    }
    .outline{
      outline: 5px dashed #000;
      outline-offset: 10px;
    }
    .nav-index>span:nth-child(3){
      nav-index: 1;
    }
    .cursor{
      /* cursor: pointer; */
      cursor: url('../../img/780.jpg'),
			/* url(hyper.cur), */
			/* url(hyper.png) 2 3, */
			pointer;
      zoom: 2;
    }
    .userSelect{
      user-select: none;
    }
    .gradient{
      background-image: linear-gradient(white, gray);
    }
    .radial-gradient{
      background-image: radial-gradient(100px, #f00, #ff0, #080);
    }
    .repeating-linear-gradient{
      min-height: 400px;
      /* background-image: repeating-linear-gradient( 180deg,
      rgb(26,198,204),
      rgb(26,198,204) 7%,
      rgb(100,100,100) 10% ); */
      /* background-image: repeating-linear-gradient(#f00, #ff0 10%, #f00 15%, #ff0 25%, #f00 30%, #ff0 40%, #f00 45%, #ff0 55%, #f00 60%, #ff0 70%, #f00 75%, #ff0 85%, #f00 90%, #ff0); */
      background-image: repeating-linear-gradient(-45deg,
      transparent,
      transparent 25px,
      rgba(255,255,255,0) 25px,
      rgba(255,255,255,0) 50px);
    }
  </style>
</head>
<body>
  <div class="user-interface">
    <div class="appearance">
      sdafadsfasdf----------none
    </div>
    <div class="text-overflow">
      clip：
      当内联内容溢出块容器时，将溢出部分裁切掉。
      ellipsis：
      当内联内容溢出块容器时，将溢出部分替换为（...）。

      clip：
      当内联内容溢出块容器时，将溢出部分裁切掉。
      ellipsis：
      当内联内容溢出块容器时，将溢出部分替换为（...）。
      clip：
      当内联内容溢出块容器时，将溢出部分裁切掉。
      ellipsis：
      当内联内容溢出块容器时，将溢出部分替换为（...）。
      clip：
      当内联内容溢出块容器时，将溢出部分裁切掉。
      ellipsis：
      当内联内容溢出块容器时，将溢出部分替换为（...）。
      当内联内容溢出块容器时，将溢出部分裁切掉。
      ellipsis：
      当内联内容溢出块容器时，将溢出部分替换为（...）。
    </div>
    <div class="outline">
      轮廓不占据空间，绘制于元素内容周围。
      根据规范，轮廓通常是矩形，但也可以是非矩形的。
      outline-offset是以border边界作为参考点的，从0开始，正值从border边界往外延，负值从border边界往里缩。
    </div>
    <div class="nav-index">
      <span>1目前只有 Opera 支持 nav-index 属性。</span>
      <span>2目前只有 Opera 支持 nav-index 属性。</span>
      <span>3目前只有 Opera 支持 nav-index 属性。</span>
      <span>4目前只有 Opera 支持 nav-index 属性。</span>
    </div>
    <div class="cursor">
      cursorcursorcursor
    </div>
    <div class="userSelect">
      userSelectuserSelectuserSelectuserSelectuserSelect
    </div>
    <div class="gradient">
      background-gradient
    </div>
    <div class="radial-gradient">
      radial-gradient
    </div>
    <div class="repeating-linear-gradient">
      repeating-linear-gradient()
    </div>
  </div>
</body>
</html>